<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
	<th:block th:include="include :: header('模型1')" />
	<th:block th:include="include :: bootstrap-fileinput-css" />
    <script th:src="@{/ajax/libs/report/echarts/echarts.min.js}"></script>
	
	
</head>
<body class="gray-bg">
 <div class="container-div">
        <div class="btn-group-sm" id="toolbar" style="padding-top: 10px;">
	        <a class="btn btn-success" onclick="openExcelModal()">
	            <i class="fa fa-plus"></i> 1.导入数据
	        </a>
	        <a class="btn btn-info" onclick="openDataGridModal()">
	            <i class="fa fa-search"></i> 2.查看数据
	        </a>
	        <a class="btn btn-success" onclick="openParamModal()">
	            <i class="fa fa-edit"></i> 3.设置参数
	        </a>
	        <a class="btn btn-danger" onclick="multab1Run1()">
	            <i class="fa fa-plus"></i> 4.开始执行
	        </a>
	        <a class="btn btn-primary" onclick="showResult()">
	            <i class="fa fa-search"></i> 5.查询结果
	        </a>
	        <a class="btn btn-primary" onclick="showResult()" style="width: 320px;text-align: left;">
	            <i class="fa fa-random"></i> 5.执行结果：<span id="maxvaluea"></span>
	        </a>
	        <a class="btn btn-success" onclick="showResultBmax()">
	            <i class="fa fa-edit"></i> 5.1投影方向
	        </a>
	        <a class="btn btn-success" onclick="openResultFmax()">
	            <i class="fa fa-edit"></i> 5.2加速结果
	        </a>
        </div>
		<div class="row">
			<div id="mainCharts" style="width: 600px;height:400px;"></div>
		</div>
	</div>
    <!-- 上传文件窗口开始 -->
    <div class="modal fade" id="importExcelModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">导入</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="form-group"  style="margin: 10px;">
                            <div class="file-loading">
                                <input id="importExcelInput" name="file" type="file" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 上传文件窗口结束 -->
    <!-- 查看数据窗口开始 -->
    <div class="modal fade" id="datagridModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" style="width: 800px;">
            <div class="modal-content">
				<div class="modal-body" style="height: 470;">
					<table id="bootstrap-table"></table>
                </div>
				<div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 查看数据窗口结束 -->
    <!-- 设置参数窗口开始 -->
    <div class="modal fade" id="paramModal" tabindex="-1" role="dialog" aria-labelledby="datagridModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
				<div class="modal-body">
					<div class="wrapper wrapper-content animated fadeInRight ibox-content">
				        <form class="form-horizontal m" id="form-multabparam-add">
				            
				            <div class="form-group" th:each="paramObj : ${paramList}">    
				                <label class="col-sm-3 control-label" th:text="${paramObj.paramName}">参数名称:</label>
				                <div class="col-sm-8">
				                    <input th:name="${paramObj.paramField}" th:value="${paramObj.paramValue}"  class="form-control" type="text">
				                </div>
				            </div>
				           
				        </form>
				    </div>
                </div>
				<div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 设置参数窗口结束 -->
    <!-- 查看结果窗口开始 -->
    <div class="modal fade" id="resultModal" tabindex="-1" role="dialog" aria-labelledby="datagridModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
				<div class="modal-body">
					<div class="wrapper wrapper-content animated fadeInRight ibox-content">
				        <form class="form-horizontal m" id="form-multabparam-add">
				            
				            <div class="form-group">
				                <label class="col-sm-3 control-label">最大a值:</label>
				                <div class="col-sm-8">
				                    <input id="ragaMaxAvalue"  class="form-control" type="text">
				                </div>
				            </div>
				            <div class="form-group">
				                <label class="col-sm-3 control-label">最大a值执行次数:</label>
				                <div class="col-sm-8">
				                    <input id="ragaMaxAindex"  class="form-control" type="text">
				                </div>
				            </div>
	                	
				            <div class="form-group">
				                <label class="col-sm-3 control-label">doubleArrayB:</label>
				                <div class="col-sm-8">
				                    <input id="doubleArrayB"  class="form-control" type="text">
				                </div>
				            </div>
				            <div class="form-group">
				                <label class="col-sm-3 control-label">doubleArrayIndex:</label>
				                <div class="col-sm-8">
				                    <input id="doubleArrayIndex"  class="form-control" type="text">
				                </div>
				            </div>
				            <div class="form-group">
				                <label class="col-sm-3 control-label">doubleArrayFv1:</label>
				                <div class="col-sm-8">
				                    <input id="doubleArrayFv1"  class="form-control" type="text">
				                </div>
				            </div>
				           
				        </form>
				    </div>
                </div>
				<div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 查看结果窗口结束 -->
    <!-- 查看投影结果窗口开始 -->
    <div class="modal fade" id="resultBmaxModal" tabindex="-1" role="dialog" aria-labelledby="datagridModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
				<div class="modal-body" style="height: 470;">
					<table id="bootstrap-table-bmax"></table>
                </div>
				<div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 查看投影结果窗口结束 -->
    <!-- 查看加速结果窗口开始 -->
    <div class="modal fade" id="resultFmaxModal" tabindex="-1" role="dialog" aria-labelledby="datagridModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
				<div class="modal-body" style="height: 470;">
					<div id="fmaxRsultCavas" style="width: 400px;height:400px;"></div>
                </div>
				<div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 查看加速结果窗口结束 -->
    
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: bootstrap-fileinput-js" />
    
    <script th:inline="javascript">
    	prefix = ctx + "multab/multabapi/multab1";
    	globalWidth = $(window).width();
    	globalHeight = $(window).height();
    	sessionId = [[${sessionId}]];//JSESSIONID
    	socket = null;
    	
    	//TODO socketUrl = ctx.replace('http','ws') + "webSocket/"+sessionId;
    	socketUrl =  "ws://localhost/myadmin/webSocket/"+sessionId;
    	console.log('socketUrl='+socketUrl);
    	
    	myChart = null;
    	chartOption = null;
    	tableData = null;
    	
    	fmaxXArray = [1,2,3];
    	fmaxYArray = [4,5,6];
    	
	    $(function(){
	    	
	    	initEcharts();
	    	initFileUpload();
	    	initTable();
	    	openSocket();
	        
	    });
	    function initEcharts(){
	    	$('#mainCharts').width(globalWidth*0.9);
	    	$('#mainCharts').height(globalHeight*0.9);
	    	myChart = echarts.init(document.getElementById('mainCharts'));
	        
	    	chartOption = {
	        	    title: {
	        	        text: '',
	        	        subtext: ''
	        	    },
	        	    tooltip: {
	        	        trigger: 'axis',
	        	        axisPointer: {
	        	            type: 'cross',
	        	            label: {
	        	                backgroundColor: '#283b56'
	        	            }
	        	        }
	        	    },
	        	    legend: {
	        	        data:['实时计算']
	        	    },
	        	    toolbox: {
	        	        show: true,
	        	        feature: {
	        	            dataView: {readOnly: false},
	        	            restore: {},
	        	            saveAsImage: {}
	        	        }
	        	    },
	        	    dataZoom: {
	        	        show: false,
	        	        start: 0,
	        	        end: 100
	        	    },
	        	    xAxis: [

	        	        {
	        	            type: 'category',
	        	            boundaryGap: true,
	        	            data: (function (){
	        	                 var res = [];
	        	                 //res.push(1);
	        	               // var len = 10;
	        	               // while (len--) {
	        	                //    res.push(10 - len - 1);
	        	                //}
	        	                 return res;
	        	            })()
	        	        }
	        	    ],
	        	    yAxis: [

	        	        {
	        	            type: 'value',
	        	            scale: true,
	        	            name: '结果值',
	        	            max: 5,
	        	            min: 0
	        	        }
	        	    ],
	        	    series: [
	        	 
	        	        {
	        	            name: '实时计算',
	        	            type: 'line',
	        	            data: (function (){
	        	                 var res = [];
	        	                 //res.push(100);
	        	                // var len = 0;
	        	               // while (len < 10) {
	        	               //     res.push((Math.random()*10 + 5).toFixed(1) - 0);
	        	               //     len++;
	        	               // }
	        	                 return res;
	        	            })()
	        	        }
	        	    ]
	        	};
	        myChart.setOption(chartOption);

	    }
	    function initFileUpload(){
	    	// 导入数据
	        $("#importExcelInput").fileinput({
	            'uploadUrl': prefix + '/upload',
	            removeFromPreviewOnError: true, //当选择的文件不符合规则时，例如不是指定后缀文件、大小超出配置等，选择的文件不会出现在预览框中，只会显示错误信息
	            validateInitialCount: true,//开启校验文件数量限制
	            maxFileCount: 1,//允许最多上传文件数量
	            dropZoneEnabled: false,//是否显示拖拽区域
	            showPreview:false,
	            maxFileSize: 1024,//单位为kb，如果为0表示不限制文件大小
	            'theme': 'fas',
	            'language': 'zh',
	            overwriteInitial: false,
	            initialPreviewAsData: true,
	            allowedFileExtensions: ['xlsx', 'xls']
	        }).on("fileuploaded", function (event, data, previewId, index) {
	            // alert(data.response.code == 'N00000');
	            if (data.response.code == '0'){
	                //
	                $('#bootstrap-table').bootstrapTable('removeAll');
	                // var list = JSON.parse(returnData.child);
	                buildImportDataGrid(data.response.data);
// 	                var list =  data.response.data;
// 	                tableData = data.response.data;
	                
// 	                $("#bootstrap-table").bootstrapTable('load',list);
	               
	                //清空上传的文件
	                $("#importExcelInput").fileinput('clear').fileinput('enable');
	                //关闭模态框
	                $('#importExcelModal').modal('hide')
	            }else {
	                layer.msg(data.response.msg)
	                //清空上传的文件
	                $("#importExcelInput").fileinput('clear').fileinput('enable');
	            }
	        });
	    }
	    function initTable(){
	    	//定义数据表格
	    	$("#bootstrap-table").bootstrapTable({
	    		striped: true,
	    		pagination: false,
	    		sidePagination: "client",
	            width: 800,
	            height: 460,
    	        columns: [
   	        	{  
   	        	    title: '序号',  
   	        	    field: '',  
   	        	    formatter: function (value, row, index) {  
   	        	        return index+1;  
   	        	    }  
   	        	}, 
				{
					field : 'param1', 
					title : '参数1'
				},
				{
					field : 'param2', 
					title : '参数2'
				},
				{
					field : 'param3', 
					title : '参数3'
				},
				{
					field : 'param4', 
					title : '参数4'
				},
				{
					field : 'param5', 
					title : '参数5'
				},
				{
					field : 'param6', 
					title : '参数6'
				},
				{
					field : 'param7', 
					title : '参数7'
				},
				{
					field : 'param8', 
					title : '参数8'
				},
				{
					field : 'param9', 
					title : '参数9'
				},
				{
					field : 'param10', 
					title : '参数10'
				},
				{
					field : 'param11', 
					title : '参数11'
				},
				{
					field : 'param12', 
					title : '参数12'
				}]
    	    });
	    	$("#bootstrap-table-bmax").bootstrapTable({
	    		striped: true,
	    		pagination: false,
	    		sidePagination: "client",
	            width: 800,
	            height: 460,
    	        columns: [
   	        	{  
   	        	    title: '序号',  
   	        	    field: '',  
   	        	    formatter: function (value, row, index) {  
   	        	        return index+1;  
   	        	    }  
   	        	}, 
				{
					field : 'param1', 
					title : '参数1'
				},
				{
					field : 'param2', 
					title : '参数2'
				},
				{
					field : 'param3', 
					title : '参数3'
				},
				{
					field : 'param4', 
					title : '参数4'
				},
				{
					field : 'param5', 
					title : '参数5'
				},
				{
					field : 'param6', 
					title : '参数6'
				},
				{
					field : 'param7', 
					title : '参数7'
				},
				{
					field : 'param8', 
					title : '参数8'
				},
				{
					field : 'param9', 
					title : '参数9'
				},
				{
					field : 'param10', 
					title : '参数10'
				},
				{
					field : 'param11', 
					title : '参数11'
				},
				{
					field : 'param12', 
					title : '参数12'
				}]
    	    });
	    }
		function buildImportDataGrid(data){
	    	
	    	var columnsArray = [];
	    	var titleArray = data.titleArray[0];
	    	var dataArray = data.dataArray;
	    	var totalCellNum = parseInt(data.totalCellNum);
	    	
	    	columnsArray.push({
    	        "field": 'dataRowIndex',
    	        "title": '序号'
    	    });
	    	for (var i = 0; i < totalCellNum; i++) {
	    		var field = 'dataValue'+i;
	    		var title = titleArray[field];
	    	    columnsArray.push({
	    	        "field": field,
	    	        "title": title
	    	    });
	    	}
	    	//定义数据表格
	    	$("#bootstrap-table").bootstrapTable('destroy').bootstrapTable({
	    		striped: true,
	    		pagination: false,
	            width: 800,
	            height: 460,
    	        columns: columnsArray
    	    });
	    	//投影结果表头根据上传文件刷新
	    	$("#bootstrap-table-bmax").bootstrapTable('destroy').bootstrapTable({
	    		striped: true,
	    		pagination: false,
	            width: 800,
	            height: 460,
    	        columns: columnsArray
    	    });
	    	
	    	//var list =  data.response.data;
	    	console.log(columnsArray);
	    	console.log(dataArray);
	    	$("#bootstrap-table").bootstrapTable('load',dataArray);
	    }
	    function openSocket() {
	        if(typeof(WebSocket) == "undefined") {
	            console.log("您的浏览器不支持WebSocket");
	        }else{
	            console.log("您的浏览器支持WebSocket");
	            //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
	            if(socket!=null){
	                socket.close();
	                socket=null;
	            }
	            socket = new WebSocket(socketUrl);
	            //打开事件
	            socket.onopen = function() {
	                console.log("websocket已打开");
	                //socket.send("这是来自客户端的消息" + location.href + new Date());
	            };
	            //获得消息事件
	            socket.onmessage = function(msg) {
	                var serverMsg = "收到服务端信息：" + msg.data;
	                console.log(serverMsg);
	                //发现消息进入    开始处理前端触发逻辑
	                //根据返回类型,将数据显示到echart或结果区域
	                var splitData = msg.data.split('-');
	                if('chart' == splitData[0]){
		                refreshMyChart(splitData[1],splitData[2]);
	                }else if('modelResult' == splitData[0]){
	                	var resultStrs = splitData[1];
	                	var jsonObj = JSON.parse(resultStrs);
	                	console.log(resultStrs);
	                	console.log(jsonObj);
	                	$('#maxvaluea').html('最优目标函数值='+jsonObj['ragaMaxAvalue']+',最优目标位置='+jsonObj['ragaMaxAindex']);
	                	$('#ragaMaxAvalue').val(jsonObj['ragaMaxAvalue']);
	                	$('#ragaMaxAindex').val(jsonObj['ragaMaxAindex']);
	                	$('#doubleArrayB').val(jsonObj['doubleArrayB']);
	                	$('#doubleArrayIndex').val(jsonObj['doubleArrayIndex']);
	                	$('#doubleArrayFv1').val(jsonObj['doubleArrayFv1']);
	                	
	                	//投影结果表格渲染
	                	$("#bootstrap-table-bmax").bootstrapTable('load',jsonObj['doubleArrayB']);
	                	
	                	//加速结果图表渲染
	                	fmaxXArray = jsonObj['doubleArrayIndex'];
    					fmaxYArray = jsonObj['doubleArrayFv1'];
	                	
	                	
	                }else if('printResult' == splitData[0]){
	                	console.log(splitData[1]);
	                }else{
	                	console.log('未知的数据');
	                }
	                
	            };
	            //关闭事件
	            socket.onclose = function() {
	                console.log("websocket已关闭");
	            };
	            //发生了错误事件
	            socket.onerror = function() {
	                console.log("websocket发生了错误");
	            }
	        }
	    }
	    function refreshMyChart(x,y){
	    	var data0 = chartOption.series[0].data;	    
            data0.push(y);
            chartOption.xAxis[0].data.push(x);

            myChart.setOption(chartOption);
	    }
	    
	    function multab1Run1(){
	    	
	    	//每次执行先清空数据
	    	initEcharts();
	    	
	    	var paramDataArray = $('#form-multabparam-add').serializeArray();
	    	var paramData = {};
	    	$.each(paramDataArray, function() {
	    		paramData[this.name] = this.value;
	    	});
	    	
	    	var data = {};
	    	data['paramData'] = paramData;
	    	//data['tableData'] = tableData;
	    	
	    	$.ajax({
	            url: prefix + "/run1",
	            data: JSON.stringify(data),
	            type: "post",
	            dataType: 'json',
	            contentType: "application/json;charset=UTF-8",
	            success: function(result) {
	                $.operate.ajaxSuccess(result);
	            }
	        })
	    	
	    }
	    
	    function buildFmaxResultCavas(xArray,yArray){
	    	//var xArray = xArrayStr.split(',');
	    	//var yArray = yArrayStr.split(',');
	    	
	    	var myChart = echarts.init(document.getElementById('fmaxRsultCavas'));
	    	var option = {
	    			tooltip: {
	        	        trigger: 'axis',
	        	        axisPointer: {
	        	            type: 'cross',
	        	            label: {
	        	                backgroundColor: '#283b56'
	        	            }
	        	        }
	        	    },
	    			toolbox: {
	        	        show: true,
	        	        feature: {
	        	            dataView: {readOnly: false},
	        	            restore: {},
	        	            saveAsImage: {}
	        	        }
	        	    },
	        	    dataZoom: {
	        	        show: false,
	        	        start: 0,
	        	        end: 100
	        	    },
	    		    xAxis: {
	    		        type: 'category',
	    		        data: xArray
	    		    },
	    		    yAxis: {
	    		        type: 'value'
	    		    },
	    		    series: [{
	    		        data: yArray,
	    		        type: 'line'
	    		    }]
	    		};
	    	myChart.setOption(option);
	    }
	    
	    
	    function openExcelModal(){
	    	$('#importExcelModal').modal('show');
	    }
	    function closeExcelModal(){
	    	$('#importExcelModal').modal('close');
	    }
	    function openDataGridModal(){
	    	$('#datagridModal').modal('show');
	    }
	    function closeDataGridModal(){
	    	$('#datagridModal').modal('close');
	    }
	    function openParamModal(){
	    	$('#paramModal').modal('show');
	    }
	    function closeParamModal(){
	    	$('#paramModal').modal('close');
	    }
	    function showResult(){
	    	$('#resultModal').modal('show');

	    }
		function closeResult(){
	    	$('#resultModal').modal('close');

	    }
		function showResultBmax(){
			$('#resultBmaxModal').modal('show');
		}
		function openResultFmax(){
			$('#resultFmaxModal').modal('show');
			buildFmaxResultCavas(fmaxXArray,fmaxYArray);
		}
    </script>
</body>

</html>
